<template>
  <view class="list">
    <view class="selected">
      <view
        class="selected_content"
        v-for="(answer, index) in answerList"
        :key="index"
        :class="{
          active: answer.word,
          error: selectList[index].isError,
        }"
      >
        <view
          class="selected_button"
          :class="{
            disabled: isCorrect === true || isCorrect === false,
          }"
          @click="checkWord(answer, index)"
        >
          {{ answer.word }}
        </view>
      </view>
    </view>
    <view class="word">
      <view
        class="word_content"
        v-for="(word, index) in randomWordList"
        :key="index"
        :class="{ select: selectList[index].selected }"
      >
        <view class="word_button" @click="selectWord(word, index)">
          {{ word }}
        </view>
      </view>
    </view>
    <template v-if="isCorrect === true">
      <view class="tips">
        <text class="tips_text">你答对了！</text>
      </view>
    </template>
    <template v-if="isCorrect === false"> 
      <view class="tips">
        <text class="tips_text">加油喔！</text>
      </view>
    </template>
  </view>
</template>

<script>
import { arrayRandomly } from "@/libs/tools";
export default {
  components: {},
  props: {
    type: {
      type: String,
      default: "1",
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      randomWordList: [],
      answerList: [],
      selectList: [],
      isCorrect: undefined,
    };
  },
  mounted() {
    this.initOptions();
  },
  methods: {
    initOptions() {
      let randomWords = arrayRandomly(JSON.parse(JSON.stringify(this.list)));
      let answerList = [];
      let selectList = [];
      let reg = /\p{P}/u;
      for (let i = 0; i < randomWords.length; i++) {
        answerList.push({ word: "", index: -1 });
        selectList.push({ selected: false });
      }
      this.answerList = answerList;
      this.selectList = selectList;
      this.randomWordList = randomWords;
    },
    selectWord(word, i) {
      if (this.isCorrect === true || this.isCorrect === false) return;
      let isSelected = this.selectList[i].selected;
      if (isSelected) return;
      let answerList = this.answerList;
      answerList.some((item, index) => {
        if (item.word === "") {
          answerList.splice(index, 1, { word: word, index: i });
          return true;
        }
      });
      this.selectList[i].selected = true;
      let flag = this.selectList.findIndex((item) => item.selected === false);
      if (flag === -1) {
        this.submit();
      }
    },
    checkWord(answer, i) {
      if (this.isCorrect === true || this.isCorrect === false) return;
      if (answer.word === "") return;
      this.answerList[i].word = "";
      this.selectList[answer.index].selected = false;
    },

    submit() {
      if (this.isCorrect === true || this.isCorrect === false) return;
      if (!this.checkRightAndWrong()) {
        this.isCorrect = true;
      } else {
        this.isCorrect = false;
        for (let i = 0; i < this.answerList.length; i++) {
          if (this.answerList[i].word !== this.list[i]) {
            this.$set(this.selectList[i], "isError", true);
          } else {
            this.$set(this.selectList[i], "isError", false);
          }
        }
      }
      this.$emit("submit", this.isCorrect, this.type);
    },
    checkRightAndWrong() {
      let answerList = this.answerList;
      let list = this.list;
      return answerList.some((item, index) => {
        if (item.word !== list[index]) {
          return true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordSort";
</style>
